/*整个界面的设计*/
.calc-container {
    width: 100%;
    height: 100%;
    flex-direction: column;
    background-color: pink;
}
/*标题栏的设计*/
.calc-titlebar {
    margin-top: 10px;
    width: 1000px;
    height: 70px;
    position: relative;
}
/*返回图标大小的设计*/
.calc-icon {
    width: 34px;
    height: 34px;
}
/*返回图标的位置设计*/
.calc-back-btn {
    left: 30px;
    top: 30px;
}
/*标题栏字体的设计*/
.calc-title {
    left: 300px;
    font-size: 45px;
    top: 20px;
}
/*结果显示框的位置设计*/
.calc-expr, .calc-rsl {
    left: 600px;
    width: 300px;
}
/*表达式输入的显示设计*/
.calc-expr {
    font-size: 70px;
    top: 100px;

}
/*摁钮的样式,大小和数字,运算符的大小*/
.calc-text-btn, .calc-op-btn, .calc-equals-btn {
    border-radius: 100px;
    height: 76px;
    width: 76px;
    font-size: 38px;
}
/*数字的背景*/
.calc-text-btn {
    background-color: cornflowerblue;
}
/*数字摁钮摁下去后的背景颜色*/
.calc-text-btn:active {
    background-color: indigo;
}
/*运算符的背景,清零C的颜色*/
.calc-op-btn {
    background-color: coral;
    color: brown;
}
/*运算符摁钮摁下去后的背景颜色*/
.calc-op-btn:active {
    background-color: indigo;
}
/*等号的背景,=的颜色*/
.calc-equals-btn {
    background-color: olivedrab;
    color: white;
}
/*运算符摁钮摁下去后的背景颜色*/
.calc-equals-btn:active {
    background-color: indigo;
}
/*第一行摁键的位置，共4行*/
.calc-btn-row-1 {
    top: 112px;
}
.calc-btn-row-2 {
    top: 196px;
}
.calc-btn-row-3 {
    top: 280px;
}
.calc-btn-row-4 {
    top: 364px;
}

/*第一列摁键的位置，共5列*/
.calc-btn-col-1 {
    left: 100px;
}
.calc-btn-col-2 {
    left: 184px;
}
.calc-btn-col-3 {
    left: 268px;
}
.calc-btn-col-4 {
    left: 352px;
}
.calc-btn-col-5 {
    left: 436px;
}
/*数字0图标的宽度*/
.calc-btn-row-span-2 {
    width: 160px;
}
/*等号=图标的长度*/
.calc-btn-col-span-2 {
    height: 160px;
}
/*第一行运算符的位置，共4行*/
.calc-icon-row-1 {
    top: 132px;
}
.calc-icon-row-2 {
    top: 216px;
}
.calc-icon-row-3 {
    top: 300px;
}
.calc-icon-row-4 {
    top: 384px;
}
/*第一列运算符的位置，共2列*/
.calc-icon-col-1 {
    left: 372px;
}
.calc-icon-col-2 {
    left: 454px;
}

